<template>
  <div class="incomeTracking">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">{{accountInfo.roleId == '1' ? '反馈情况查看' : '我的反馈' }}</div>
      </div>
    </div>
    <div class="content" >
      <div class="">
        <div class="operation" v-if="accountInfo.roleId == '1'">
            <div class="feedback-wrapper" style="margin-top: 15px">
                <div class="td">问题反馈:</div>
                <ul class="q-list">
                  <li class="it" @click="handle_module(it, i)" :class="{'acted': modulesIndex == i }" v-for="(it, i) in question.modules" :key="'modules' + i"> {{it.moduleName}}</li>
                </ul>
            </div>
            <div class="feedback-wrapper">
                <div class="td">问题类型:</div>
                <ul class="q-list">
                  <li class="it" @click="handle_type(it, i)" :class="{'acted': typeIndex == i }" v-for="(it, i) in question.questionTypes" :key="'types' + i"> {{it.moduleName}}</li>
                </ul>
            </div>
            <div class="feedback-wrapper">
                <div class="td">更多选项:</div>
                <div class="bd">
                    <el-form :inline="true" :model="form"  class="formList">
                        <el-form-item label="反馈用户:" >
                            <el-input v-model="form.user"></el-input>
                        </el-form-item>
                        <el-form-item label="反馈时间:" style="width: 27%;">
                            <el-date-picker
                                size="mini"
                                v-model="form.time"
                                type="daterange"
                                value-format="yyyy-MM-DD"
                                format="yyyy-MM-dd"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-form>
                </div> 
            </div>
            <div class="feedback-wrapper">
                <div class="td"></div>
                <div class="bd">
                    <el-form :inline="true" :model="form1"  class="formList">
                        <el-form-item label="处理人员:" >
                            <el-input v-model="form1.manger"></el-input>
                        </el-form-item>
                        <el-form-item label="处理时间:" style="width: 27%;">
                            <el-date-picker
                                v-model="form1.feedtime"
                                type="date"
                                 size="mini"
                                value-format="YYYY-MM-DD"
                                >
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item >
                          <el-button
                            style="margin-left: 20px"
                            size="mini"
                            type="primary"
                            @click="handle_search()"
                            >查询</el-button
                          >
                        </el-form-item>
                    </el-form>
                </div> 
            </div>
        </div>
        <div class="total-title">
           <i class="el-icon-warning all"></i> 共有 <span class="all">{{dataTotal}}</span> 个问题反馈
        </div>
        <div class="tableBox">
            <el-table
                id="table1"
                ref="table"
                size="mini"
                :header-cell-style="{ background: '#eef1f6' }"
                :data="tableData"
                v-loading="tableLoading"
                style="width: 100%"
                border
            >
              <el-table-column prop="functionModule" label="功能模块"   min-width="120" ></el-table-column>
              <el-table-column prop="questionType" label="反馈类型" min-width="120" ></el-table-column>
              <el-table-column prop="backUserName" label="反馈用户" ></el-table-column>
              <el-table-column prop="backAreaName" label="区域" min-width="120"></el-table-column>
              <el-table-column prop="backPhone" label="手机号" min-width="100" ></el-table-column>
              <el-table-column prop="content" label="反馈内容" show-overflow-tooltip min-width="200" >
                  <template slot-scope="scope">
                      <div  class="g-content" >
                          <p v-html="scope.row.content"></p>
                          <viewer class="g-view" :images="scope.row.imgs">
                                <img v-for="(src, i) in scope.row.imgs" :src="src" :key="i">
                          </viewer>
                      </div>
                  </template>
              </el-table-column>
              <el-table-column prop="backTime" label="反馈时间"  min-width="140"></el-table-column>
              <el-table-column prop="score" label="评分" ></el-table-column>
              <el-table-column prop="proExplain" label="处理说明" show-overflow-tooltip min-width="180">
                  <template slot-scope="scope">
                      <div v-if="scope.row.status == '0'">
                          <el-input maxlength="150" type="textarea" v-model="scope.row.proExplain"></el-input>
                      </div>
                      <div v-if="scope.row.status == '1'">
                          {{scope.row.proExplain}}
                      </div>
                  </template>
                <!-- proFeedBack  -->
              </el-table-column>
              <el-table-column prop="proUserName" label="处理人员" ></el-table-column>
              <el-table-column prop="proDate" label="处理时间" min-width="140"></el-table-column>
              <el-table-column prop="status" label="处理进展" min-width="100">
                     <template slot-scope="scope">
                      <div>
                         <span class="g-status"  @click="handle_feed(scope.row)" v-if="scope.row.status == '0'" >待处理</span>
                         <span v-if="scope.row.status == '1'" >已处理</span>
                      </div>
                  </template>
              </el-table-column>
            </el-table>
            <div class="page">
                <el-pagination
                    layout="total,sizes, prev, pager, next, jumper"
                    :page-sizes="[10, 20, 50]"
                    @size-change="sizeChange"
                    :page-size="pageSize"
                    :total="dataTotal"
                    :current-page.sync="currentPage"
                    @current-change="handleCurrentChange"
                ></el-pagination>
            </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import { getSessionStorage } from "@/common/js/storage";
import { getCookie, setCookie } from "@/common/js/cookie";
import { mergeSpan } from "@/utils/mixin.js";
import { $budgetAPI } from "@/api";
import prefixAPI from "@/api/prefixAPI";
export default {
  name: "question",
  data() {
      const start = new Date();
      const end = new Date(start.getTime() - 3600 * 1000 * 24 * 7);
      return {
          form: {
              user: "",
              time: [end, start],
          },
          form1: {
              manger: "",
              feedtime: '',
          },
          accountInfo: "",
          tableLoading: false,
          tableData: [],
          question: {},
          modulesIndex: -1,
          typeIndex: -1,
          currentPage: 1,
          pageSize: 10,
          dataTotal: 0,
          imgs: [],
      };
  },
  created() {
        this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
        this.init();
  },
  methods: {
        // 初始化
        init() {
            this.getModuleList();
        },
        getModuleList() {
            $budgetAPI.getModuleList({}, res=> {
                this.question = res.content;
                this.getData();
            })
        },
        getData() {
            let that = this,
                obj = that.question, 
                moduleObj = obj.modules[that.modulesIndex] || '',
                typeObj = obj.questionTypes[that.typeIndex] || '';

            that.tableLoading = true;
            
            var t1 = that.form.time[0] && typeof that.form.time[0] == 'object' ? that.formatTime(that.form.time[0]) : that.form.time[0];
            var t2 = that.form.time[1] && typeof that.form.time[1] == 'object' ? that.formatTime(that.form.time[1]) : that.form.time[1];
            $budgetAPI.getFeedBackList(
                {
                  moduleId: moduleObj.moduleId,
                  typeId: typeObj.moduleId,
                  backUserName: that.form.user,
                  backStartDate: t1 || '',
                  backEndDate: t2 || '',
                  proUserName: that.form1.manger,
                  proDate: that.form1.feedtime,
                  currentPage: that.currentPage,
                  pageSize: that.pageSize,
                },
                (res) => {
                that.tableLoading = false;
                    if (res.code === 0) {
                        res.content.items.map(it => {
                            let imgReg = /<img.*?(?:>|\/>)/gi; //匹配图片中的img标签
                            let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配图片中的src
                            let arr = it.content.match(imgReg);
                            let srcArr = [];
                            if (arr) {
                                for (let i = 0; i < arr.length; i++) {
                                let src = arr[i].match(srcReg)
                                    srcArr.push(src[1])
                                }
                                it.imgs = srcArr;
                            }
                        })
                        that.tableData = res.content.items;
                        that.dataTotal = res.content.totalNum;
                    }
                },
                (err) => {
                  that.tableLoading = false;
                }
            );
        },
        formatTime(time) {
            var y = time.getFullYear(), 
                m = time.getMonth() + 1,
                d = time.getDate()
            return y + '-' + (m < 10 ? '0' + m : m ) + '-' + (d < 10 ? '0' + d : d );
        },
        handle_module(it, i) {
            if (this.modulesIndex >= 0) {
              this.modulesIndex = -1;
            } else {
              this.modulesIndex = i
            }
        },
        handle_type(it, i) {
          if (this.typeIndex >= 0) {
              this.typeIndex = -1;
            } else {
              this.typeIndex = i
            }
        },
        handle_search() {
            this.getData()
        },
        handle_show(it) {
            let imgReg = /<img.*?(?:>|\/>)/gi; //匹配图片中的img标签
            let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配图片中的src
            let arr = it.match(imgReg);
            let srcArr = [];
            for (let i = 0; i < arr.length; i++) {
              let src = arr[i].match(srcReg)
              // 获取图片地址
              srcArr.push(src[1])
            }
            console.log(srcArr);
            this.imgs = srcArr;
        },
        handle_feed(it) {
          var that = this;
            if (!it.proExplain) {
                that.$message({
                    type:'error',
                    message: '请输入处理说明',
                });
                return false;
            }

            $budgetAPI.proFeedBack({
                id: it.id,
                proExplain: it.proExplain
            }, res=> {
                if (res && res.code == 0) {
                    that.$message({
                      type:'success',
                      message: '提交成功',
                    });
                } else {
                    that.$message({
                      type:'error',
                      message: '提交失败',
                    });
                }
                that.getData(); 
            })
        },
         //页码改变
        sizeChange(val) {
            this.pageSize = val;
            this.getData();
        },
        //翻页操作
        handleCurrentChange(page) {
            this.currentPage = page;
            //将当前页传到保存的form表单
            this.getData();
        },
  },
};
</script>

<style lang="scss" scoped>


/deep/ .el-table .cell {
  text-align: center;
}

.feedback-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    .td {
      width: 55px;
      margin-right: 10px;
    }
    .bd {
      flex: 1;
    }
    .q-list {
      display: flex;
      .it {
        margin: 0 10px;
        cursor: pointer;
        padding: 2px 5px;
        border-radius: 5px;
      }
      .acted {
        background-color: #0086ff;
        color: #fff;
      }
    }
  }
  .g-status {
    color: #0086ff;
    cursor: pointer;
  }
  .total-title {
    margin: 20px 0;
    height: 40px;
    background: inherit;
    background-color: rgba(230, 247, 255, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(186, 231, 255, 1);
    border-radius: 4px;
    font-size: 14px;
    line-height: 40px;
    padding-left: 20px;
    .all {
      color: #1890FF;
    }
  }
  
</style>
